<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
        }
        html,body{
            background: linear-gradient(to right, #ff9569 0%, #e92758 100%);
        }
        .header{
            font-family: 华文琥珀;
            font-size: 35px;
            padding: 50px 30px;
            color: white;
        }
        .footer{
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            width: 100%;
        }
        .a{
            text-decoration: none;
            color: white;
        }
    .call_img{
        border-radius: 50%;
        overflow: hidden;
    }
    .main{
        margin-top: 10px;
    }
    </style>
</head>
<body>
<div id="app">
    <!--修改背景颜色为粉色-->
    <el-container style="background: linear-gradient(to right, #ff9569 0%, #e92758 100%);">
        <!--修改标题字体为楷体-->
        <el-header class="header">
            樊的小站
        </el-header>
        <el-main class="main">
            <!--添加背景图为山水画-->
            <div style='background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/%E5%85%AB%E5%A4%A7%E5%B1%B1%E6%B0%B4%E5%9B%BE.jpg/800px-%E5%85%AB%E5%A4%A7%E5%B1%B1%E6%B0%B4%E5%9B%BE.jpg"); background-repeat: no-repeat; background-size: cover;'>
                <el-table
                        :data="tableData"
                        style="width: 100%;border-radius: 20px;">
                    <!--调整表格边框和列宽-->
                    <el-table-column
                            prop="img"
                            label="头像"
                            border=true
                            align=center
                            header-align=center
                    >
                        <template slot-scope="scope">
                            <img :src="scope.row.img" alt="" width="50px" height="50px" class="call_img">
                        </template>

                    </el-table-column>
                    <el-table-column
                            prop="describes"
                            label="功能描述"
                            border=true
                            align=center
                            header-align=center
                    >
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="入口"
                            border=true
                            align=center
                            header-align=center
                    >
                        <template slot-scope="scope">
                            <el-button  v-if="scope.row.statuss===0" @click="to(scope.row.url)" style="background: linear-gradient(to right, #ff9569 0%, #e92758 100%);color: white;">立即前往</el-button>
                            <el-button type="info" v-if="scope.row.statuss===1">暂不可用</el-button>
                    </template>
                    </el-table-column>
                </el-table>

            </div>

        </el-main>

        <!--在页脚添加诗句-->
        <el-footer class="footer" style='font-family: KaiTi; text-align: center; color: black; font-size: 10px;'><a class="a" href="http://beian.miit.gov.cn/">备案号:豫ICP备2023005542号</a></el-footer>
    </el-container>


</div>
</body>

<script>

    var app=new Vue({
        el:"#app",
        data:{
            tableData: []
        },created(){
          this.init()
        },
        methods:{
            to(url){
                window.location.href=url
            },
            init(){
                axios.post("main/main").then(result => {
                    this.tableData=result.data.data
                })
            }
        }
    })
</script>
</html>